import { App, createVNode, DirectiveBinding, render } from "vue"
import Loading from '@/components/Loding.vue'

const createLoading = (el: any, binding: DirectiveBinding<any>) => {
  const vm: any  = binding.instance
  const leaveExr: string = el.getAttribute('loading-leave')

  const handleLeave = Object.prototype.toString.call(vm[leaveExr]).slice(8,-1) === 'Function' ? vm[leaveExr] : () => null

  const vLoading: any  = createVNode(Loading, { handleLeave })
  render(vLoading, el)
  el.instance = vLoading.component!.ctx
}
export function loading(app:App){
  app.directive('loading1', {
    mounted(el, binding) {
      createLoading(el, binding)
      const instance = el.instance
      console.log(el.instance);
      
      !!binding.value && instance.show()
    },

    updated: function(el, binding) {
      const instance = el.instance
      if (binding.oldValue !== binding.value) {
        !!binding.value ? instance.show() : instance.close()
      }
    }
  })
}